<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               title="下载二维码"
               :modal="false"
               class="user-dialog add-or-updata"
               width="25%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <div style="margin-bottom: 10px;">选择图片尺寸</div>
      <el-radio-group v-model="imgSize"
                      style="margin-bottom: 10px;"
                      v-show="delayShow"
                      @change="changeValue">
        <el-radio label="1">40 x 30mm</el-radio>
        <el-radio label="2">50 x 20mm</el-radio>
      </el-radio-group>
      <div id="divBox"
           v-show="false">
        <div ref="content"
             style="height:fit-content;text-align: center;">
          <!-- <div class="msg-img">
            <div id="qrCode"
                 ref="qrCodeDiv"></div>
          </div> -->
          <QRcode width="180"
                  height="180"
                  :content="JSON.stringify(dataForm.id)"
                  :load="false"></QRcode>
          <div class="qrCodeDetail">
            <div>ID：{{ dataForm.deviceId }}</div>
            <div>类型：{{$store.state.EquTypeList.find(item => item.id === dataForm.deviceType).name}}</div>
            <div>品牌：{{ dataForm.brand }}</div>
            <div>位置：{{ dataForm.areaName }}</div>
          </div>
        </div>
      </div>
      <div>
        <iframe src="/static/canvas.html"
                name="myiframe"
                ref="myiframe"
                scrolling="auto"
                frameborder="0"
                v-show="delayShow2"
                style="width: 100%; height: 500px;"></iframe>
      </div>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t('cancel')}}</el-button>
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="dataFormSubmitHandle()">下载</el-button>
      </template>
      <!-- <el-button id="button1"
                 @click="drawCanvasImage">测试</el-button> -->
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
import QRCode from 'qrcodejs2'
// import html2canvas from 'html2canvas'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '',
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '', // 添加或修改接口，API地址
        updateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '', // 导出接口，API地址
        publishUrl: ''
      },
      dataForm: {
      },
      imgSize: '',
      delayShow: false,
      delayShow2: false,
      visible: false
    }
  },
  components: { QRCode },
  mounted () {
  },
  updated () {
  },
  methods: {
    init (data) {
      if (data) {
        this.dataForm = data
        this.dataForm.deviceTypeName = this.$store.state.EquTypeList.find(item => item.id === this.dataForm.deviceType).name
      }
      this.visible = true
      // this.getQrCodeId()
      setTimeout(() => {
        this.delayShow = true
      }, 1000)
      // this.$nextTick(() => {
      //   this.dataForm.deviceType = this.$store.state.EquTypeList.find(item => item.id === this.dataForm.deviceType).name
      // })
    },
    closeDialog () {
      this.dataForm = {}
      this.imgSize = ''
      this.delayShow = false
      this.delayShow2 = false
      this.$emit('callBack')
      this.visible = false
    },
    changeValue () {
      this.drawCanvasImage()
      this.delayShow2 = true
    },
    // 绘制canvas
    drawCanvasImage () {
      // let size = {}
      if (this.imgSize === '1') {
        this.dataForm.width = 236
        this.dataForm.height = 185
        this.dataForm.classname = 'box-in'
        this.dataForm.classname2 = 'textBox1'
      } else {
        this.dataForm.width = 295
        this.dataForm.height = 125
        this.dataForm.classname = 'box-in2'
        this.dataForm.classname2 = 'textBox2'
      }
      let qrImg = document.getElementsByTagName('canvas')[0].toDataURL('image/png')
      this.dataForm.imgUrl = qrImg
      window.myiframe.getData(this.dataForm)
      // let canvas = document.getElementById('canvas')
      // canvas.width = 200
      // canvas.height = 500
      // let context = canvas.getContext('2d')
      // let img = new Image()
      // img.src = url
      // console.log(img)
      // img.onload = function () {
      //   context.drawImage(img, 200, 500)
      // }
    },
    dataURLtoFile (imageData) {
      if (imageData) {
        let arr = imageData.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        let blob = new File([u8arr], 'file', { type: mime })
        return blob
      }
    },
    base642Url (data) {
      let parts = data.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let length = raw.length
      let arr = new Uint8Array(length)
      for (var i = 0; i < length; i++) {
        arr[i] = raw.charCodeAt(i)
      }
      var blob = new Blob([arr], { type: contentType })
      return URL.createObjectURL(blob)
    },
    dataFormSubmitHandle: debounce(
      function () {
        window.myiframe.getCard()
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>

<style lang="scss" scoped>
.msg-img {
  width: 120px;
  height: 120px;
  // background-image: url("~@/assets/img/code4.png");
  // background-repeat: no-repeat;
  // background-size: 100%;
  position: absolute;
  top: 47px;
  right: 20px;
}
.qrCodeDetail {
  width: 50%;
  color: #000;
  margin: 0 auto;
  text-align: left;
  font-size: 18px;
  div {
    margin-bottom: 10px;
  }
}
::deep .el-dialog__body {
  height: 50vh;
  overflow: auto;
}
::deep .el-dialog {
  height: 70vh;
  overflow: auto;
}
</style>
